<template>
  <div class="searchDiv">
    <el-form :inline="true" :model="data.queryParam">
      <el-form-item>
        <el-input type="text" v-model="data.queryParam.name" placeholder="角色名" clearable/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loadData">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div style="margin-bottom: 10px;">
    <el-button type="primary" size="small" @click="handlerAdd" v-permission="'aclrole:add'">添加</el-button>
  </div>
  <el-table :data="data.tableData" border stripe>
    <el-table-column label="id" prop="id" width="100"></el-table-column>
    <el-table-column label="角色名称" prop="role"></el-table-column>
    <el-table-column label="mark" prop="mark"></el-table-column>
    <el-table-column label="创建时间" prop="createTime"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" size="small" @click="handlerFP(scope.row)" v-permission="'aclrole:permission'">分配菜单</el-button>
        <el-button type="info" size="small" @click="handlerEdit(scope.row)" v-permission="'aclrole:edit'">修改</el-button>
        <el-button type="danger" size="small" @click="handlerDelete(scope.row)" v-permission="'aclrole:delete'">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      v-model:current-page="data.queryParam.page"
      v-model:page-size="data.queryParam.size"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="data.total"
      @size-change="loadData"
      @current-change="loadData"
      style="margin-top: 20px;"
  />

  <el-dialog :title="data.dialogTitle" v-model="data.dialogVisible" width="30%" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="data.formData" label-width="100px">
      <el-form-item label="角色名称" >
        <el-input type="text" v-model="data.formData.role"/>
      </el-form-item>
      <el-form-item label="角色说明" >
        <el-input type="text" v-model="data.formData.mark"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="data.dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="confirmAdd">确定</el-button>
    </template>
  </el-dialog>

  <el-dialog v-model="data.fpDialogVisible" width="50%" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-tree
        ref="menuSelectTreeRef"
        style="max-width: 600px"
        :props="data.props"
        :data="data.menuData"
        :default-checked-keys="data.hasMenu"
        node-key="id"
        highlight-current
        show-checkbox
        :default-expand-all="true"
    />
    <template #footer>
      <el-button @click="data.fpDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="confirmFP">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {reactive, onMounted, ref} from "vue";
import axios from "@/util/axios.js";
import {ElMessage, ElMessageBox} from "element-plus";

const menuSelectTreeRef = ref(null)

const data = reactive({
  tableData: [],
  total: 0,
  queryParam: {
    page: 1,
    size: 10,
    name: ''
  },
  dialogVisible: false,
  dialogTitle: '',
  formData: {
    id: undefined,
    role: '',
    mark: ''
  },
  fpDialogVisible: false,
  menuData: [],
  props: {
    children: 'children',
    label: 'name',
  },
  hasMenu: [],
  currSelectRoleId: undefined,
})

const loadData = () => {
  axios.get("/aclrole/list", {
    params: data.queryParam
  }).then(res => {
    data.tableData = res.data.info.items;
    data.total = res.data.info.total
  }).catch(err => {
    console.log(err)
  })
}

onMounted(() => {
  loadData()
})

const resetFormData = ()=>{
  data.formData = {
    id: undefined,
    role: '',
    mark: ''
  }
}

const handlerAdd = () => {
  resetFormData()
  data.dialogTitle = '添加角色'
  data.dialogVisible = true;
}

const confirmAdd = ()=>{
  if (data.formData.id) {
    // 更新
    axios.put('/aclrole/edit', data.formData).then(res => {
      data.dialogVisible = false
      ElMessage.success('修改成功')
      loadData()
    })
  } else {
    // 添加
    axios.post('/aclrole/save', data.formData).then(res => {
      data.dialogVisible = false
      ElMessage.success('添加成功')
      loadData()
    })
  }
}

const handlerEdit = (row) => {
  data.dialogTitle = '修改角色'
  data.dialogVisible = true;
  resetFormData()
  data.formData.id = row.id
  data.formData.role = row.role
  data.formData.mark = row.mark
}

const handlerDelete = (row) => {
  ElMessageBox.confirm(
      '是否确认删除?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(() => {
    // 删除
    axios.delete('/aclrole/'+row.id).then(res => {
      ElMessage.success('删除成功')
      loadData()
    })
  })
}

const handlerFP = async  (row) => {
  const roleId = row.id;
  data.currSelectRoleId = roleId;
  const r = await axios.get("/aclrole/hasMenus/"+roleId);
  data.hasMenu = r.data.info
  // console.log('hasMenu',data.hasMenu)
  axios.get('/aclpermission/tree').then(res=>{
    data.fpDialogVisible = true
    data.menuData = res.data.info
  }).catch(err => {

  })
}

const confirmFP = ()=>{
  const checkedNodes =  menuSelectTreeRef.value.getCheckedNodes(false,false);
  const postData = {
    roleId: data.currSelectRoleId,
    menuIdList: checkedNodes.map(item=>item.id)
  }
  if (!postData.menuIdList ||  postData.menuIdList.length <= 0) {
    ElMessage.error('请勾选菜单')
    return
  }
  // console.log(postData)
  axios.post('/aclrole/setRolePermissions',postData).then(res => {
    data.fpDialogVisible = false
    ElMessage.success('操作成功')
  }).catch(err => {

  })
  data.currSelectRoleId = undefined
}

</script>

<style scoped>

</style>